<template>
  <div class="ZYF-history">
    <h3 class="h3">历史监测数据查询</h3>
    <div class="deviceinfo-from">
      <a-form-model :model="page" :colon="false" layout="inline">
        <a-form-model-item label="服务部">
          <a-select v-model="page.areaId" show-search :filter-option="filterOption" style="width: 12vw" placeholder="请选择服务部" allowClear>
            <a-select-option :value="v.id" v-for="v in selectData" :key="v.id">
              {{v.name}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="企业名称">
          <a-input v-model="page.companyName" placeholder="请输入企业名称" allowClear/>
        </a-form-model-item>
        <a-form-model-item>
          <a-button @click="onSubmit" type="primary">查询</a-button>
        </a-form-model-item>
      </a-form-model>
<!--                  <a-button class="exportbtn">-->
<!--                      <a-icon type="cloud-download" />导出数据-->
<!--                  </a-button>-->
    </div>

    <div class="tableclass">
      <!--          :row-selection="{onChange:onChange,onSelect:onSelect,onSelectAll,onSelectAll}"-->
      <my-table :data-source="tableData" :pagination="false" :rowKey="record=> record.id">
        <a-table-column title="行政区" data-index="areaName" align="center" :ellipsis="true" />
        <a-table-column title="企业名称" data-index="companyName" align="center" :ellipsis="true" />
        <a-table-column title="监控点名称" data-index="monitorName" align="center" :ellipsis="true" />
        <a-table-column title="监测时间" data-index="createTime" align="center" :ellipsis="true" />
        <a-table-column title="监测值1" data-index="equipmentInfo.name_0" align="center">
          <template slot-scope="data">
            <div class="hidden1">{{data}}</div>
          </template>
        </a-table-column>
        <a-table-column title="监测值2" data-index="equipmentInfo.name_1" align="center">
          <template slot-scope="data">
            <div class="hidden1">{{data}}</div>
          </template>
        </a-table-column>
        <a-table-column title="监测值3" data-index="equipmentInfo.name_2" align="center">
          <template slot-scope="data">
            <div class="hidden1">{{data}}</div>
          </template>
        </a-table-column>
        <a-table-column key="action" title="操作" align="center" width="150px">
          <template slot-scope="text,record,index">
            <div class="handle">
              <!--                            <span @click="equipmentFn(record,index)">设备情况</span>-->
              <!--                            <span>设备维修情况</span>-->
              <span @click="isEchartsFn(record,index)">查看图表</span>
              <span @click="fileExport(record,index)">导出</span>
            </div>
          </template>
        </a-table-column>
      </my-table>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" @change="pagechangeFn" hideOnSinglePage />
        </div>
      </div>
    </div>
<!--    :monitorData="monitorData"-->
    <echartesPop ref="echartsRef" :isDate="true"></echartesPop>
    <down-loasd ref="downLoasd" :selectMN="selectMN"></down-loasd>
  </div>
</template>

<script>
import echartesPop from "@/views/air/components/echartesPop";
import downLoasd from "@/views/air/components/DownLoasdExcel";
import moment from "moment";
export default {
  name: "HistoryMonitor",
  components: {
    echartesPop,
    downLoasd
  },
  props:{
    equipmentTypeId:{
      type:[String,Number],
      request:true
    }
  },
  data() {
    return {
      moment,
      total: 0, // 总页数
      page: {
        // 分页数据
        current: 1,
        size: 10,
        monitorType: "",
        dataStatus: "",
        areaId:undefined,
        companyName:"",
      },
      title: "",
      isshow: false,
      // monitorData: [], // 弹窗警告类型单选框数组
      tableData: [], // 表格数据
      selectData:[],  //树形下拉数据
      selectMN:'',
    };
  },
  methods: {
    // 下拉搜索筛选
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 图表弹窗方法
    isEchartsFn(record, index) {
      if (record.monitorFactorsPos.length <= 0) {
        this.$message.warning("此设备没有警告信息");
        return;
      }
      this.$refs.echartsRef.isEcharts = true;
      this.$refs.echartsRef.echartsFrom.mn = record.mn;
      this.$refs.echartsRef.tableFrom.mn = record.mn;
      this.$refs.echartsRef.echartsFrom.sampleType = record.monitorFactorsPos[0].monitorFactorsCode;
      // this.monitorData = record.monitorFactorsPos;
      this.$nextTick(() => {
        this.$refs.echartsRef.init(record.id)
        // this.$refs.echartsRef.getEchartsData();
        // this.$refs.echartsRef.getTableData();
      });
    },
    // 导出
    fileExport(record,index) {
      console.log(record)
      this.selectMN = record.mn;
      this.$refs.downLoasd.isDown = true;
      // this.$refs.downLoasd.init();
    },
    // 查询
    onSubmit() {
      this.page.current = 1;
      this.getData()
      // console.log("submit!", this.form);
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getData();
    },

    // 获取分页数据
    getData() {
      this.page.monitorType = this.equipmentTypeId;
      this.$api.postMonitorFindRealData(this.page).then((res) => {
        if (res.status == 200) {
          this.tableData = res.data.data;
          this.tableData.forEach((item, index) => {
            var pushData = {};
            if (item.monitorFactorsPos && item.monitorFactorsPos.length != 0) {
              item.createTime = item.monitorFactorsPos[0].datetime?moment(item.monitorFactorsPos[0].datetime).format("YYYY/MM/DD hh:mm:ss"):"暂无数据";
              let _jcx_list = {};
              item.monitorFactorsPos.forEach((_item, _index) => {
                let _val = "name_" + _index;
                _jcx_list[_val] = _item.realValue?_item.realValue + "(" + _item.monitorFactorsName + ")":"";
              });
              pushData = {...this.tableData[index].equipmentInfo, ..._jcx_list,};
            } else {
              item.createTime = "暂无数据";
              pushData = {...this.tableData[index].equipmentInfo, ...{
                  name_0: "-",
                  name_1: "-",
                  name_2: "-",
                  name_3: "-",
                },
              };
            }
            this.tableData[index].equipmentInfo = pushData;
          });
          console.log(this.tableData)
          this.total = res.data.total;
        }
      });
    },
  },
  watch: {
  },
  mounted() {
    this.getData();
    this.$api.areaFindPoint(3).then(res=>{
      if(res.data.code == 0){
        this.selectData = res.data.data;
      }
    })
  },
};
</script>
<style scoped lang="scss">
::v-deep .className{
  background: #000;
}
.Greenclass {
  font-weight: bold;
  color: #359843;
}
.Redclass {
  font-weight: bold;
  color: #da6957;
}
.Yellclass {
  font-weight: bold;
  color: #bdb42d;
}

.ZYF-history {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  position: relative;
  .deviceinfo-from {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    ::v-deep .ant-form-item {
      width: 300px;
    }
    ::v-deep .ant-form {
      width: 80%;
      display: flex;
    }
  }

  .exportbtn {
    background-color: transparent;
    border: 0;
    color: #207064;
  }
  .content-bottom {
    width: 100%;
    position: absolute;
    bottom: 4%;
    right: 2%;
  }
  .page-box {
    float: right;
  }
}
/* 图表 */
.line-echarts {
  width: 100%;
  height: 300px;
}
.echarts-title {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 10px 0;
  box-sizing: border-box;
}
::v-deep.ZYF-history .ant-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

::v-deep.ZYF-history .ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
.handle {
  width: 100%;
  color: #1890ff;
  display: flex;
  justify-content: space-around;
}
.handle > span:hover {
  cursor: pointer;
}

::v-deep.ZYF-history .ant-table table {
  height: auto;
  border-radius: 0;
}

::v-deep.ZYF-history .ant-table-thead > tr > th {
  line-height: 22px;
  border-bottom: 0;
  border-radius: 0;
}

// 分页
::v-deep.ZYF-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>